<template>
    <div>
         <editor id="tinymce" v-model="content" :init="editorInit"></editor>
         <div v-html="content"></div>
    </div>
</template>
<script lang="ts" setup>
// @ts-ignore
import { reactive, ref, onMounted } from 'vue';
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/advlist";
import "tinymce/plugins/emoticons";
import 'tinymce/plugins/emoticons/js/emojis';
// // import "tinymce/plugins/contextmenu"; 属于内置的组件，不要再次引入
import "tinymce/plugins/wordcount";
// import "tinymce/plugins/colorpicker"; 属于内置的组件，不需要再次引入
// import "tinymce/plugins/textcolor"; 属于内置的组件，不需要再次引入
const content = ref('');
const editorInit = reactive({
  skin_url: "tinymce/skins/ui/oxide",
  content_css: "tinymce/skins/content/default/content.css",
  height: 300,
  language_url: "tinymce/langs/zh-Hans.js",
  language:'zh-Hans',
  plugins: "link lists emoticons advlist image code table wordcount",
  toolbar:
    "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | emoticons",
  branding: false,
  menubar: false
});
onMounted(() => {
  tinymce.init({});
});
</script>
<style lang="scss" scoped>

</style>

